<template>
<div class="login-bg">
    <p class="title">
      Welcome
    </p>
    <div class="myGroup">
      <div class="myGroup-item">
        <label>账号</label>
        <input placeholder="请输入账号" v-model="account" />
      </div>
      <div class="myGroup-item">
        <label>密码</label>
        <input placeholder="请输入登录密码" v-model="password" />
      </div>
    </div>
    <button class="myBtn"  @click="btnClick">登录</button>
</div>
</template>
<script>
import { XInput, Group, XButton } from "vux";
export default {
  name: "homeEdit",
  components: {
    XInput,
    Group,
    XButton
  },
  data() {
    return {
      account: null,
      password: null
    };
  },
  methods: {
    btnClick() {
      if (!this.account && !this.password) {
        return this.$vux.toast.show({
          type: "warn",
          text: "请填写登录信息！"
        });
      }
      let defer = this.baseService.postForm(this.__ctx + "/org/login/valid", {
        account: this.account,
        password: this.password
      });
      defer.then(data => {
        if (data.isOk) {
          let _this = this;
          this.$vux.toast.show({
            text: data.msg || "登录成功",
            onHide() {
              _this.$router.push("/home");
            }
          });
        } else {
          this.$vux.toast.show({
            type: "warn",
            text: data.msg
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.login-bg {
  background: -webkit-linear-gradient(135deg, #55e6c1, #1b9cfc);
  background: linear-gradient(135deg, #55e6c1, #1b9cfc);
  height: 100vh;
  .title {
    font-size: 4.7em;
    text-align: center;
    color: #fff;
    padding-top: 35%;
    margin-bottom: 35px;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
  }
  .myGroup {
    width: 80%;
    margin: 0 auto;
    .myGroup-item {
      border: 1px solid #dcdee2;
      border-radius: 20px;
      height: 42px;
      position: relative;
      line-height: 42px;
      margin-bottom: 20px;
      label {
        color: #fff;
        font-size: 1.3em;
        margin-left: 15px;
      }
      input {
        border: 0;
        outline: 0;
        -webkit-appearance: none;
        background-color: transparent;
        font-size: inherit;
        color: inherit;
        height: calc(~"100% - 2px");
        vertical-align: top;
        margin-left: 15px;
        color: #fff;
        font-size: 1.2em;
        width: calc(~"100% - 85px");
      }
    }
  }
}
.myBtn {
  margin-top: 4em;
  width: 80%;
  touch-action: none;
  border-radius: 20px;
  background-color: #25ccf7;
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  line-height: 2.33333333;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: hidden;
  border: none;
}
</style>
